<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet/less" href="css/styles.less">
    <script src="https://cdn.jsdelivr.net/npm/less" ></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<header class="header">
    <div class="container">
        <div class="burger" id="burger">
            <svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512"
                 xmlns="http://www.w3.org/2000/svg">
                <path d="m464.883 64.267h-417.766c-25.98 0-47.117 21.136-47.117 47.149 0 25.98 21.137 47.117 47.117 47.117h417.766c25.98 0 47.117-21.137 47.117-47.117 0-26.013-21.137-47.149-47.117-47.149z"/>
                <path d="m464.883 208.867h-417.766c-25.98 0-47.117 21.136-47.117 47.149 0 25.98 21.137 47.117 47.117 47.117h417.766c25.98 0 47.117-21.137 47.117-47.117 0-26.013-21.137-47.149-47.117-47.149z"/>
                <path d="m464.883 353.467h-417.766c-25.98 0-47.117 21.137-47.117 47.149 0 25.98 21.137 47.117 47.117 47.117h417.766c25.98 0 47.117-21.137 47.117-47.117 0-26.012-21.137-47.149-47.117-47.149z"/>
            </svg>
        </div>
        <div class="logo">
            <img src="images/logo.png" alt="Logo">
        </div>
        <nav class="menu" id="menu">
            <div class="close">
                <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve">
<g>
	<g>
		<path d="M300.188,246L484.14,62.04c5.06-5.064,7.852-11.82,7.86-19.024c0-7.208-2.792-13.972-7.86-19.028L468.02,7.872
			c-5.068-5.076-11.824-7.856-19.036-7.856c-7.2,0-13.956,2.78-19.024,7.856L246.008,191.82L62.048,7.872
			c-5.06-5.076-11.82-7.856-19.028-7.856c-7.2,0-13.96,2.78-19.02,7.856L7.872,23.988c-10.496,10.496-10.496,27.568,0,38.052
			L191.828,246L7.872,429.952c-5.064,5.072-7.852,11.828-7.852,19.032c0,7.204,2.788,13.96,7.852,19.028l16.124,16.116
			c5.06,5.072,11.824,7.856,19.02,7.856c7.208,0,13.968-2.784,19.028-7.856l183.96-183.952l183.952,183.952
			c5.068,5.072,11.824,7.856,19.024,7.856h0.008c7.204,0,13.96-2.784,19.028-7.856l16.12-16.116
			c5.06-5.064,7.852-11.824,7.852-19.028c0-7.204-2.792-13.96-7.852-19.028L300.188,246z"/>
	</g>
</g>
</svg>
            </div>
            <ul>
                <li class="menu-item">
                    <a href="#">Пиццы</a>
                </li>
                <li class="menu-item">
                    <a href="#">Напитки</a>
                </li>
                <li class="menu-item">
                    <a href="#">Доставка и оплата</a>
                </li>
                <li class="menu-item">
                    <a href="#">Контакты</a>
                </li>
            </ul>
        </nav>
        <div class="cart">
            <img src="images/commerce-and-shopping.png" alt="Cart">
        </div>
    </div>
</header>

<section class="main">
    <div class="container">
        <div class="main-info">
            <h1 class="double-title">
                Самая вкусная пицца в мире <span>только в Pizza Cheff</span>
            </h1>
            <div class="main-advantages">
                <div class="advantage">
                    <div class="advantage-image">
                        <img src="images/hop.png" alt="Hop">
                    </div>
                    <div class="advantage-text">
                        <div class="advantage-title">
                            Лучшее тесто
                        </div>
                        <div class="advantage-description">
                            Мы создаем тесто только из
                            отборной итальянской муки
                            наивысшего качества
                        </div>
                    </div>
                </div>
                <div class="advantage">
                    <div class="advantage-image">
                        <img src="images/kitchen-pack.png" alt="Kitchen pack">
                    </div>
                    <div class="advantage-text">
                        <div class="advantage-title">
                            Лучшие повара
                        </div>
                        <div class="advantage-description">
                            Пиццы готовят самые
                            профессиональные
                            итальянские повара
                        </div>
                    </div>
                </div>
                <div class="advantage">
                    <div class="advantage-image">
                        <img src="images/seo-and-web.png" alt="Seo and web">
                    </div>
                    <div class="advantage-text">
                        <div class="advantage-title">
                            Гарантия качества
                        </div>
                        <div class="advantage-description">
                            Наша пиццерия получила
                            множество наград и
                            признаний по всему миру
                        </div>
                    </div>
                </div>
                <div class="advantage">
                    <div class="advantage-image">
                        <img src="images/holidays.png" alt="Holidays">
                    </div>
                    <div class="advantage-text">
                        <div class="advantage-title">
                            Отборные рецепты
                        </div>
                        <div class="advantage-description">
                            Мы используем рецепты
                            от мировых лидеров
                            в изготовлении пиццы
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-action">
                <button class="btn">Выбрать пиццу</button>
            </div>
        </div>
        <div class="main-image">
            <img src="images/pizza_big.png" alt="Big pizza">
        </div>
    </div>
</section>

<section class="products">
    <div class="container">
        <h2 class="products-title" id="products-title">Выберите свою любимую пиццу</h2>
        <div class="products-items">
            <div class="product">
                <div class="product-image">
                    <img src="images/products/product1.png" alt="product 1">
                </div>
                <div class="product-title">
                    Мясная Делюкс
                </div>
                <div class="product-text">
                    Пепперони, лук, бекон, томатная паста, колбаски, перец, грибы, соус чили, ананасы
                </div>
                <div class="product-action">
                    <button class="btn">В корзину</button>
                </div>
            </div>
            <div class="product">
                <div class="product-image">
                    <img src="images/products/product2.png" alt="product 2">
                </div>
                <div class="product-title">
                    Морская Премиум
                </div>
                <div class="product-text">
                    Перец, сыр, креветки, кальмары, мидии, лосось
                </div>
                <div class="product-action">
                    <button class="btn">В корзину</button>
                </div>
            </div>
            <div class="product">
                <div class="product-image">
                    <img src="images/products/product3.png" alt="product 3">
                </div>
                <div class="product-title">
                    Бекон и Сосиски
                </div>
                <div class="product-text">
                    Бекон, сыр, сосиски, ананас, томатная паста
                </div>
                <div class="product-action">
                    <button class="btn" id="no-touch">В корзину</button>
                </div>
            </div>
            <div class="product">
                <div class="product-image">
                    <img src="images/products/product4.png" alt="product4">
                </div>
                <div class="product-title">
                    Куриная Делюкс
                </div>
                <div class="product-text">
                    Курица, ананас, сыр Пепперони, соус для пиццы, томатная паста
                </div>
                <div class="product-action">
                    <button class="btn">В корзину</button>
                </div>
            </div>
            <div class="product">
                <div class="product-image">
                    <img src="images/products/product5.png" alt="product 5">
                </div>
                <div class="product-title">
                    Барбекю Премиум
                </div>
                <div class="product-text">
                    Свинина BBQ, соус Барбкею, сыр, курица, соус для пиццы, соус чили
                </div>
                <div class="product-action">
                    <button class="btn">В корзину</button>
                </div>
            </div>
            <div class="product">
                <div class="product-image">
                    <img src="images/products/product6.png" alt="product 6">
                </div>
                <div class="product-title">
                    Пепперони Дабл
                </div>
                <div class="product-text">
                    Пепперони, сыр, колбаса 2 видов: обжаренная и вареная
                </div>
                <div class="product-action">
                    <button class="btn">В корзину</button>
                </div>
            </div>
            <div class="product">
                <div class="product-image">
                    <img src="images/products/product7.png" alt="product 7">
                </div>
                <div class="product-title">
                    Куриное трио
                </div>
                <div class="product-text">
                    Жареная курица, Тушеная курица, Куриные наггетсы, перец, сыр, грибы, соус для пиццы
                </div>
                <div class="product-action">
                    <button class="btn">В корзину</button>
                </div>
            </div>
            <div class="product">
                <div class="product-image">
                    <img src="images/products/product8.png" alt="product 8">
                </div>
                <div class="product-title">
                    Сырная
                </div>
                <div class="product-text">
                    Сыр Джюгас, Сыр с плесенью, Сыр Моцарелла, Сыр секретный
                </div>
                <div class="product-action">
                    <button class="btn">В корзину</button>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="order">
    <div class="container">
        <div class="order-text">
            <div class="order-text-title double-title">
                <span>Хватит думать!</span> Доставим заказ за 30 минут!
            </div>
            <div class="order-text-massage">
                Мы гарантированно доставим вашу пиццу за 30 минут с момента оформления заказа. Если мы опоздаем даже на
                1 минуту - вы получаете весь заказ бесплатно и ваучер на скидку на следующий заказ. Мы гордимся нашим
                сервисом и сделаем всё, чтобы наш клиент был доволен и не остался голодный!
            </div>
        </div>
        <div class="order-form">
            <input type="text" class="order-input" id="name-input" placeholder="Ваше имя">
            <input type="text" class="order-input" placeholder="Адрес доставки">
            <input type="text" class="order-input" placeholder="Телефон">
            <button class="btn">Оформить заказ</button>
        </div>
        <div class="order-image">
            <img src="images/pizzzzza.png" alt="Pizza">
        </div>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <div class="logo">
            <img src="images/logo.png" alt="Logo">
        </div>
        <div class="rights">Все права защищены, <span>2020</span></div>
    </div>
</footer>

<script>
    document.getElementById('burger').onclick = function () {
        document.getElementById('menu').classList.add('open');
    }

    document.querySelectorAll('#menu *').forEach((item) => {
        item.onclick = () => {
            document.getElementById('menu').classList.remove('open');
        }
    })
</script>

</body>
</html>